<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <script type="text/javascript" src="vue.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <style>
        body{font-family:'Microsoft Yahei';font-size:12px;color:#666;}
        html,body{height:100%}
        /* 顶部样式 */
        .header_con{
            background-color:#f7f7f7;
            height:29px;
            border-bottom:1px solid #dddddd
        }

        .header{
            width:1200px;
            height:29px;
            margin:0 auto;
        }

        .welcome,.login_info,.login_btn,.user_link{
            line-height:29px;
        }

        .login_info{
            display:none;
        }

        .login_info em{color:#ff8800}

        .login_btn a,.user_link a{
            color:#666;
        }

        .login_btn a:hover,.user_link a:hover{
            color:#ff8800;
        }

        .login_btn span,.user_link span{
            color:#cecece;
            margin:0 10px;
        }


        /* logo、搜索框、购物车样式 */

        .search_bar{width:1200px;height:115px;margin:0 auto;}
        .logo{width:150px;height:59px;margin:29px 0 0 17px;}

        .search_con{width:616px;height:38px;border:1px solid #37ab40;margin:34px 0 0 124px;background:url(../images/icons.png) 10px -338px no-repeat;}
        .search_con .input_text{width:470px;height:34px;border:0px;margin:2px 0 0 36px;outline:none;font-size:12px;color:#737272;font-family:'Microsoft Yahei'}

        .search_con .input_btn{
            width:100px;height:38px;background-color:#37ab40;border:0px;font-size:14px;color:#fff;font-family:'Microsoft Yahei';outline:none;cursor:pointer;
        }

        /* 商品列表样式 */

        .list_model{width:1200px;height:340px;margin:15px auto 0;}
        .list_title{height:40px;border-bottom:2px solid #42ad46}
        .list_title h3{height:40px;line-height:40px;font-size:16px;color:#37ab40;font-weight:bold;}
        .list_title .subtitle{height:20px;line-height:20px;margin-top:15px;}
        .list_title .subtitle span{color:#666;margin:0 10px 0 20px;}
        .list_title .subtitle a{color:#666;margin:0 5px;}
        .list_title .subtitle a:hover,.goods_more:hover{color:#ff8800}
        .goods_more{height:20px;margin-top:15px;color:#666}

        .goods_con{height:300px;}
        .goods_banner{width:200px;height:300px;}
        .goods_banner img{width:200px;height:300px;}

        .goods_list{width:1000px;height:299px;border-bottom:1px solid #ededed}
        .goods_list li{height:299px;width:249px;border-right:1px solid #ededed;float:left}
        .goods_list li:hover{width:248px;height:297px;border:1px solid gold;}
        .goods_list li:hover img{opacity:0.8}

        .goods_list li h4{width:200px;height:50px;margin:20px auto 0;text-align:center;}
        .goods_list li h4 a{font-size:14px;color:#666;font-weight:normal;line-height:24px;}
        .goods_list li h4 a:hover{color:#ff8800}

        .goods_list li img{display:block;width:180px;height:180px;margin:0 auto;}
        .goods_list li .prize{text-align:center;font-size:20px;color:#c40000;margin-top:5px;}

        /* 页面底部样式 */
        .footer{
            border-top:2px solid #42ad46;
            margin:30px 0;
        }

        .foot_link{text-align:center;margin-top:30px;}
        .foot_link a,.foot_link span{color:#4e4e4e;}
        .foot_link a:hover{color:#ff8800}
        .foot_link span{padding:0 10px}
        .footer p{text-align:center; margin-top:10px;}


        /* 二级页面面包屑导航 */
        .breadcrumb{
            width:1200px;height:40px;margin:0 auto;
        }
        .breadcrumb a{line-height:40px;color:#37ab40}
        .breadcrumb a:hover{color:#ff8800}
        .breadcrumb span{line-height:40px;color:#666;padding:0 5px;}


        .main_wrap{width:1200px;margin:0 auto;}
        .l_wrap{width:200px;}
        .r_wrap{width:980px;}


        /* 新品推荐样式 */

        .new_goods{
            border:1px solid #ededed;
            border-top:2px solid #37ab40;
            padding-bottom:10px;
        }

        .new_goods h3{
            height:33px;line-height:33px;background-color:#fcfcfc;border-bottom:1px solid #ededed;font-size:14px;font-weight:normal;text-indent:10px;
        }

        .new_goods ul{width:160px;margin:0 auto;overflow:hidden;}
        .new_goods li{border-bottom:1px solid #ededed;margin-bottom:-1px;}
        .new_goods li img{display:block;width:150px;height:150px;margin:10px auto;}
        .new_goods li h4{width:160px;margin:0 auto;}
        .new_goods li h4 a{font-weight:normal;color:#666;display:block;width:160px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}
        .new_goods li .prize{font-size:14px;color:#da260e;margin:10px auto;}



        /* 商品列表样式 */

        .sort_bar{height:30px;background-color:#f0fdec}
        .sort_bar a{display:block;height:30px;line-height:30px;padding:0 20px;float:left;color:#000}
        .sort_bar .active{background-color:#37ab40;color:#fff;}


        .goods_type_list{
            margin:10px auto 0;
        }

        .goods_type_list li{
            width:196px;
            float:left;
            margin-bottom:10px
        }

        .goods_type_list li img{width:160px;height:160px;display:block;margin:10px auto;}
        .goods_type_list li h4{width:160px;margin:0 auto;}
        .goods_type_list li h4 a{font-weight:normal;color:#666;display:block;width:160px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}
        .operate{width:160px;margin:10px auto;position:relative;}
        .goods_type_list .operate .prize{color:#da260e; font-size:14px;}
        .goods_type_list .operate .unit{color:#999;padding-left:5px;}
        .goods_type_list .operate .add_goods{display:inline-block;width:15px;height:15px;background:url(../images/shop_cart.png);position:absolute;right:0;top:3px;}


        /* 分页样式 */

        .pagenation{height:32px;text-align:center;font-size:0;margin:30px auto;}
        .pagenation a{display:inline-block;border:1px solid #d2d2d2;background-color:#f8f6f7;font-size:12px;padding:7px 10px;color:#666;margin:5px}

        .pagenation .active{background-color:#fff;color:#43a200}



        /* 把标签默认的间距设为0 */
        body,ul,ol,p,h1,h2,h3,h4,h5,h6,dl,dd,select,input,textarea,form{margin:0;padding:0}

        /* 让h标签文字大小继承body的文字设置 */
        h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}

        /* 去掉列表默认的图标 */
        ul,ol{list-style:none;}

        /* 去掉em默认的斜体 */
        em{font-style: normal;}

        /* 去掉a标签默认的下划线 */
        a{text-decoration:none;}


        /* 去掉加链接时产生的框线 */
        img{border:0;}

        /* 清除浮动 */
        .clearfix:before,.clearfix:after{content:"";display:table}
        .clearfix:after{clear:both;}
        .clearfix{zoom:1}

        /* 浮动 */
        .fl{float:left}
        .fr{float:right}
    </style>
</head>
<body>
<div id="app">
    <div class="header_con">
        <div class="header">
            <div class="welcome fl">欢迎来到菜先生!
                <a @click="goBack()" style="cursor: pointer;">返回首页</a>
            </div>
            <div class="fr">
               <!-- <div class="login_info fl">
                    欢迎您：<em>张 山</em>

                </div>-->
                <div class="login_btn fl">
                    <a @click="userLogin()">登录</a>
                    <span>|</span>
                    <a @click="userRegister()">注册</a>
                </div>
                <div class="user_link fl">
                    <span>|</span>
                    <a @click="business()">商家中心</a>
                    <span>|</span>
                    <a @click="message()">消息中心</a>
                    <span>|</span>
                    <a @click="isLogin()">用户中心</a>
                    <span>|</span>
                    <a @click="myShop()">我的购物车</a>
                    <span>|</span>
                    <a @click="myOrder()">我的订单</a>
                </div>
            </div>
        </div>
    </div>


    <div class="jumbotron" style="width: 100%;height: 200px;background-color: #80C1CA; text-align: center">
        <div style="font-size: 30px;">尊敬的小主，看来你很喜欢{{category.category}}类商品呀！</div>
        <div style="margin-top: 10px; font-size: 30px;">浏览愉快哦</div>
    </div>


    <div class="list_model">
        <div class="goods_con clearfix">
            <ul class="goods_list fl" style="padding-left: 90px; width:100%;">
                <li v-for="(g,i) in moreGoodsArr" :src= "g.img" :name="g.gname"  :sprice= "g.sprice":id="g.id" @click="detail(g.id)">
                    <h4><a>{{g.gname}}</a></h4>
                    <a><img :src="g.img"></a>
                    <div class="price" style="text-align: center; font-size:15px; font-weight: bolder; color: red">{{g.sprice}}￥</div>
                </li>
            </ul>
        </div>
    </div>

</div>
<script>
    var app = new Vue({
        el:"#app",
        data:{
            moreGoodsArr:[],
            category:{}
        },
        methods:{
            goBack:function(){
                $.get("/cai/consumer/businessLogin",function (backData){
                    if(backData.code == 2){
                        window.location.href = "/cai/index.html";
                    }else {
                        window.location.href = "/cai/indexTwo.html";
                    }}
                );
            },
            myOrder:function(){
                $.get("/cai/consumer/businessLogin",function (backData){
                    if(backData.code == 2){
                        if(confirm("还未登录，请先进行登录")){
                            window.location.href = "/cai/userLogin.html";
                        }
                    }else {
                        window.location.href = "/cai/userOrder.html"
                    }}
                );
            },
            userRegister:function(){
                $.get("/cai/consumer/businessLogin",function (backData){
                    if(backData.code == 2){
                        window.location.href = "/cai/userRegister.html";
                    }else {
                        app.$notify.error({
                            title: '错误提示',
                            message: '您已经成功注册，请勿重复注册'
                        });
                    }}
                );
            },
            userLogin:function(){
                $.get("/cai/consumer/businessLogin",function (backData){
                    if(backData.code == 2){
                        window.location.href = "/cai/userLogin.html";
                    }else {
                        app.$notify.error({
                            title: '错误提示',
                            message: '您已经成功登录，请勿重复登录'
                        });
                    }}
                );
            },
            message:function(){
                $.get("/cai/consumer/businessLogin",function (backData){
                    if(backData.code == 2){
                        if(confirm("还未登录，请先进行登录")){
                            window.location.href = "/cai/userLogin.html";
                        }
                    }else {
                        window.location.href = "/cai/reception.html"
                    }}
                );
            },
            myShop:function(){
                $.get("/cai/consumer/businessLogin",function (backData){
                    if(backData.code == 2){
                        if(confirm("还未登录，请先进行登录")){
                            window.location.href = "/cai/userLogin.html";
                        }
                    }else {
                        window.location.href = "/cai/shop.html";
                    }}
                );
            },
            isLogin:function(){
                $.get("/cai/consumer/businessLogin",function (backData){
                        if(backData.code == 2){
                            if(confirm("还未登录，请先进行登录")){
                                window.location.href = "/cai/userLogin.html";
                            }
                        }else {
                            window.location.href = "/cai/mineInfo.html";
                        }
                    }
                );
            },
            detail:function(a){
                window.location.href="/cai/detail.html?id="+a;
            },

            login: function () {
                window.location.href = "/cai/userLogin.html";
            },
            business:function () {
                $.get("/cai/consumer/businessLogin",function (backData) {
                    if(backData.code == 1){
                        window.location.href = "/cai/businessMain.html";
                    }else if(backData.code == 3){
                        window.location.href = "/cai/businessRegister.html";
                    }else{
                        if(confirm("还未登录，请先进行登录")){
                            window.location.href = "/cai/userLogin.html";
                        }
                    }
                });
            }

        }
    });
    window.onload = function () {
        var url = location.search;
        var id = JSON.parse(window.decodeURIComponent(url.split("=")[1]));
        console.log(id);
        $.get("/cai/more/goodsMore/"+id,function (backData) {
            app.moreGoodsArr = backData.data.goods;
            app.category = backData.data.category;
        })
    };


</script>

</body>
</html>